<template>
  <view class="content">
    <view class="box">

      <view class="Info">
        <view class="form-item">
          <h5 class="Text">姓名</h5>
          <input type="text" placeholder="姓名" class="Input" v-model="name" />
        </view>
        <view class="form-item">
          <h5 class="Text">手机号码</h5>
          <input type="number" placeholder="手机号码" class="Input" v-model="phone" />
        </view>
        <view class="form-item">
          <h5 class="Text">选择地区</h5>
          <input type="text" placeholder="所在地区" class="Input" v-model="region" />
        </view>
        <view class="form-item">
          <h5 class="Text">详细地址</h5>
          <input type="text" placeholder="街道门牌信息" class="Input" v-model="detail" />
        </view>
        <view class=" fromleft">
          <h5 class="Default" style="width:180rpx;line-height: 70rpx;">设为默认地址</h5>
          <view style="width:100rpx;float: left;">
    
          </view>
        </view>
      </view>

      <button class="save-btn" @click="saveAddress">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      switchStatus: "",
      name: "",
      phone: "",
      region: "",
      detail: ""
    };
  },
  onLoad(options) {
    if (options.name) {
      this.name = options.name;
      this.phone = options.phone;
      this.region = `${options.province} ${options.city} ${options.district}`;
      this.detail = options.detail;
    }
  },
  methods: {
    saveAddress() {
      // 简单校验，实际可更完善
      if (!this.name || !this.phone || !this.region || !this.detail) {
        uni.showToast({
          title: "请完善信息",
          icon: "none"
        });
        return;
      }
      // 这里可调用接口提交数据，示例中简单模拟保存并返回上一页
      uni.showToast({
        title: "保存成功",
        icon: "success"
      });
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.fromleft {
  display: flex !important;
  justify-content: left;
  justify-items: left;
}

.Default {
  color: #333;
  width: 300upx;
  margin-bottom: 30upx;
  margin-left: 20upx;
}

.Info {
  margin-bottom: 260upx;
}

.form-item {
  height: 100upx;
  margin-bottom: 15px;
  display: flex;
  border-bottom: 2upx solid #e5e5e5;
}

.Text {
  color: #333;
  width: 150upx;
  margin-left: 20upx;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.Input {
  display: inline-block;
  width: 300upx;
  margin: 0 auto;
  font-size: 25upx;
}

.save-btn {
  background-color: #0c0c0d;
  color: #fff;
  border-radius: 50upx;
}

.box {
  width: 670upx;
  height: 136upx;
  /* overflow:hidden; */
  margin-top: 12px;
  margin-bottom: 1100upx;
}

.content {

  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>